<template>
  <div class="card_box">
    <p class="card_top">注:红色未开始，蓝色进行中，绿色已完成</p>
    <div class="item_card">
      <div
        v-for="(item, index) in cardList"
        :key="index"
        class="item"
        @click="goCardProject(item)"
      >
        <div
          v-if="item.ZXL"
          :ref="`textTop${index}`"
          class="item_top"
          :style="`background:${TopStyle(parseInt(item.ZXL.split('%')[0]))}`"
        >
          <text-over-tooltip
            ref-name="testName2"
            :content="item[map.CPROGRAMNAME]"
            placement="top"
          />
        </div>
        <div class="item_bot">
          <div class="item_bot_top">
            <span>{{ item.year }}</span>
            <p>重要<i class="el-icon-star-off" /></p>
          </div>
          <div class="item_bot_bot">
            <div class="item_bot_left">
              <div
                v-for="(it, index1) in dataContent"
                :key="index1"
                class="item_left_list"
              >
                <span><div
                        v-if="index1 % 2 === 1"
                        class="dot"
                        :style="`background: ${it.color};`"
                      />
                  {{ it.text }}</span>
                <p>{{ item[it.ZIDUAN] }}</p>
              </div>
            </div>
            <div class="item_bot_right">
              <div class="progress_top">
                <span>项目类型</span>
                <p>{{ item.CPROGRAMTYPENAME }}</p>
              </div>
              <div class="progress_bot">
                <img src="@/assets/images/xctown/图形查看.png" alt="">
                <span>执行率</span>
                <div v-if="item.ZXL" class="progress_bot_main">
                  <el-progress
                    type="circle"
                    :percentage="parseInt(item.ZXL.split('%')[0])"
                    :stroke-width="14"
                    :color="ColorStyle(parseInt(item.ZXL.split('%')[0]))"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="pagination_box">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :current-page="currentPage"
        :page-size="pageSize"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>
<script>
import TextOverTooltip from '@/components/TextOverTooltip/index.vue';
import { getQueryBodyByProduce } from '@/api/dynamicInterface';
export default {
  components: {
    TextOverTooltip
  },
  props: {
    cardList: {
      type: Array,
      default() {
        return [];
      }
    },

    map: {
      type: Object,
      default: () => ({})
    },

    total: {
      type: Number,
      default: 0
    },

    pageSize: {
      type: Number,
      default: 0
    },

    currentPage: {
      type: Number,
      default: 0
    },
    silderBarCheckedKey: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      dataContent: [
        { text: '总预算', ZIDUAN: 'YSS' },
        { text: '总支出', ZIDUAN: 'ZFS', color: '#fc5c5c' },
        { text: '总结余', ZIDUAN: 'ZJY' },
        { text: '资金来源', ZIDUAN: 'CRESOURCENAME', color: '#15be50' },
        { text: '指标类型', ZIDUAN: 'CBUDGETCATEGORYNAME' }
        // { text: '单位名称', ZIDUAN: 'CENTERPRISECODE1', color: '#1492ff' }
      ],
      optionList: []
    };
  },
  computed: {
    menuList() {
      return this.$store.state.permission.menuList;
    }
  },
  created() {
    this.getTownList();
  },
  methods: {
    turnToNumber(str) {
      let res = 0;
      if (str) {
        res = Number(str.replace(/\%$/, ''));
      }

      return res;
    },

    handleCurrentChange(val) {
      this.$emit('paginationChange', val);
    },
    ColorStyle(val) {
      if (val === 100) {
        return '#15be50';
      } else if (val > 0) {
        return '#1492ff';
      } else {
        return '#f56c6c';
      }
    },
    TopStyle(val) {
      if (val === 100) {
        return '#6dd993;';
      } else if (val > 0) {
        return '#99cbf9';
      } else {
        return '#f56c6ccc';
      }
    },
    getTownList() {
      getQueryBodyByProduce({
        tableId: 391,
        pageIndex: 0,
        pageSize: 100,
        pageType: 1
      }).then(res => {
        if (res.success) {
          this.optionList = res.data;
        } else {
          this.$message.error(res.message);
        }
      });
    },
    goRouteBtn(tilte, name, code) {
      const { title } = this.$route.query;
      this.optionList.forEach(it => {
        if (it.CENTERPRISECODE1 === this.silderBarCheckedKey) {
          this.menuList.forEach(item => {
            if (item.meta.title === tilte) {
              if (item.children) {
                item.children.forEach(chit => {
                  if (chit.meta.title === tilte) {
                    const params = {
                      path: chit.path,
                      query: {
                        title: chit.meta.title,
                        menuId: chit.id,
                        flag: 0,
                        // isShow: isShow,
                        sId: 'TabsTable',
                        ENTERPRISECODE: it.ENTERPRISECODE,
                        ENTERPRISENAME: it.ENTERPRISENAME,
                        FILEID: it.FILEID,
                        isHideLeft: chit.isHideLeft,
                        isHideTop: chit.isHideTop,
                        [code]: name,
                        routeTitle: title,
                        CENTERPRISECODE1: it.CENTERPRISECODE1
                      }
                    };
                    this.$router.push(params);
                  } else {
                    const params = {
                      path: chit.path,
                      query: {
                        title: item.meta.title,
                        menuId: item.id,
                        flag: 0,
                        // isShow: isShow,
                        sId: 'TabsTable',
                        ENTERPRISECODE: it.ENTERPRISECODE,
                        ENTERPRISENAME: it.ENTERPRISENAME,
                        FILEID: it.FILEID,
                        isHideLeft: item.isHideLeft,
                        isHideTop: item.isHideTop,
                        [code]: name,
                        routeTitle: title,
                        CENTERPRISECODE1: it.CENTERPRISECODE1
                      }
                    };
                    this.$router.push(params);
                  }
                });
              } else {
                const params = {
                  path: item.path,
                  query: {
                    title: item.meta.title,
                    menuId: item.id,
                    flag: 0,
                    // isShow: isShow,
                    sId: 'TabsTable',
                    ENTERPRISECODE: it.ENTERPRISECODE,
                    ENTERPRISENAME: it.ENTERPRISENAME,
                    FILEID: it.FILEID,
                    isHideLeft: item.isHideLeft,
                    isHideTop: item.isHideTop,
                    [code]: name,
                    routeTitle: title,
                    CENTERPRISECODE1: it.CENTERPRISECODE1
                  }
                };
                this.$router.push(params);
              }
            }
          });
        }
      });
    },
    // 点击卡片跳转
    goCardProject(val) {
      this.goRouteBtn('项目分析', val.CPROGRAMNAME, 'PROGRAMNAME');
    }
  }
};
</script>
<style lang="scss" scoped>
$vw: 1920px;
@function px2vw($px) {
  @return $px / $vw * 100vw;
}
.card_box {
  width: 100%;
  height: 100%;
  .card_top {
    height: 3%;
    margin: 0;
    font-size: px2vw(14px);
    color: #999999;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  .item_card {
    height: 91%;
    // display: flex;
    // flex-wrap: wrap;
    // // justify-content: space-between;
    // // align-content: space-between;
    // overflow: auto;
    // .item:nth-of-type(7),
    // .item:nth-of-type(8),
    // .item:nth-of-type(9) {
    //   margin-bottom: 0;
    // }
    // .item:nth-of-type(3),
    // .item:nth-of-type(6),
    // .item:nth-of-type(9) {
    //   margin-right: 0;
    // }
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    gap: px2vw(10px);
    .item {
      overflow: hidden;
     width: 100%;
     height: 100%;
      background: #ffffff;
      border-radius: 4px;
      cursor: pointer;
      .item_top {
        width: 100%;
        height: 12%;
        background: #99cbf9;
        font-size: px2vw(18px);
        color: #333333;
        font-weight: 500;
        // display: flex;
        // align-items: center;
        padding: 0 px2vw(20px);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: px2vw(18px);
      }
      .item_bot {
        height: 88%;
        padding-left: px2vw(20px);
        .item_bot_top {
          height: 16%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          span {
            font-size: px2vw(16px);
            color: #1492ff;
          }
          p {
            padding-right: px2vw(20px);
            font-size: px2vw(14px);
            color: #999999;
            margin: 0;
            i {
              margin-left: px2vw(8px);
              color: #1492ff;
            }
          }
        }
        .item_bot_bot {
          height: 82%;
          display: flex;
          padding-bottom: 2%;
          .item_bot_left {
            width: 66%;
            height: 100%;
            display: flex;
            flex-wrap: wrap;
            align-content: space-between;
            .item_left_list {
              width: 50%;
              height: 24%;
              display: flex;
              flex-direction: column;
              justify-content: center;
              .dot {
                width: px2vw(6px);
                height: px2vw(6px);
                opacity: 1;

                border-radius: 1px;
                margin-right: 5px;
              }
              span {
                color: #999999;
                display: flex;
                align-items: center;
                height: 48%;
                font-size: px2vw(14px);
              }
              p {
                display: flex;
                height: 52%;
                color: #333333;
                font-weight: 400;
                font-size: px2vw(16px);
                margin: 0;
              }
            }
          }
          .item_bot_right {
            width: 34%;
            .progress_top {
              height: 25%;
              display: flex;
              align-items: self-start;
              flex-direction: column;
              p {
                display: flex;
                height: 52%;
                color: #333333;
                font-size: px2vw(16px);
                margin: 0;
              }
              span {
                height: 48%;
                display: inline-block;
                color: #999999;
                font-size: px2vw(14px);
              }
            }
            .progress_bot {
              margin-top: 5%;
              height: 60%;
              span {
                color: #999999;
                display: inline-block;
                font-size: px2vw(14px);
                height: 20%;
              }
              .progress_bot_main {
                width: 45%;
                margin-top: 5%;
                height: 77%;
              }
            }
          }
        }
      }
    }
  }
  .pagination_box {
    height: 6%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
}
/deep/.el-progress,
/deep/.el-progress-circle {
  width: 100% !important;
  height: 100% !important;
  display: flex;
  align-items: center;
}
/deep/.el-progress__text {
  font-size: px2vw(16px) !important;
  font-weight: 400;
  color: #333333;
}
</style>
